<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<div class="gv-forms gv-forms-fluid" layout="column">
  <h1>Client Registration</h1>

  <div class="gv-form">
    <h2>Configuration</h2>
    <div class="gv-form-content" layout="column">
      <h6>Enable Dynamic Client Registration</h6>
      <md-input-container class="gv-input-container-dense">
        <md-checkbox
          ng-model="$ctrl.settings.application.registration.enabled"
          aria-label="Client registration"
          ng-change="$ctrl.saveClientRegistration()"
          ng-disabled="$ctrl.isReadonlySetting('application.registration.enabled')"
        >
          Client registration for applications (OpenID Connect - Dynamic Client Registration)
          <md-tooltip ng-if="$ctrl.isReadonlySetting('application.registration.enabled')"
            >{{$ctrl.providedConfigurationMessage}}</md-tooltip
          >
        </md-checkbox>
      </md-input-container>

      <h6>Allowed application types</h6>
      <md-input-container class="gv-input-container-dense">
        <md-checkbox
          ng-model="$ctrl.settings.application.types.simple.enabled"
          aria-label="Allow or deny simple application type"
          ng-change="$ctrl.saveApplicationType('simple')"
          ng-disabled="$ctrl.isReadonlySetting('application.types.simple.enabled')"
        >
          Simple (A hands-free application. Using this type, you will be able to define the client_id by your own)
          <md-tooltip ng-if="$ctrl.isReadonlySetting('application.types.simple.enabled')"
            >{{$ctrl.providedConfigurationMessage}}</md-tooltip
          >
        </md-checkbox>
      </md-input-container>
      <md-input-container class="gv-input-container-dense">
        <md-checkbox
          ng-model="$ctrl.settings.application.types.browser.enabled"
          aria-label="Allow or deny browser application type"
          ng-change="$ctrl.saveApplicationType('browser')"
          ng-disabled="$ctrl.isReadonlySetting('application.types.browser.enabled')"
        >
          Browser (Angular, React, ...)
          <md-tooltip ng-if="$ctrl.isReadonlySetting('application.types.browser.enabled')"
            >{{$ctrl.providedConfigurationMessage}}</md-tooltip
          >
        </md-checkbox>
      </md-input-container>
      <md-input-container class="gv-input-container-dense">
        <md-checkbox
          ng-model="$ctrl.settings.application.types.web.enabled"
          aria-label="Allow or deny web application type"
          ng-change="$ctrl.saveApplicationType('web')"
          ng-disabled="$ctrl.isReadonlySetting('application.types.web.enabled')"
        >
          Web (Java, .Net, ...)
          <md-tooltip ng-if="$ctrl.isReadonlySetting('application.types.web.enabled')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
        </md-checkbox>
      </md-input-container>
      <md-input-container class="gv-input-container-dense">
        <md-checkbox
          ng-model="$ctrl.settings.application.types.native.enabled"
          aria-label="Allow or deny native application type"
          ng-change="$ctrl.saveApplicationType('native')"
          ng-disabled="$ctrl.isReadonlySetting('application.types.native.enabled')"
        >
          Native (iOS, Android, ...)
          <md-tooltip ng-if="$ctrl.isReadonlySetting('application.types.native.enabled')"
            >{{$ctrl.providedConfigurationMessage}}</md-tooltip
          >
        </md-checkbox>
      </md-input-container>
      <md-input-container class="gv-input-container-dense">
        <md-checkbox
          ng-model="$ctrl.settings.application.types.backend_to_backend.enabled"
          aria-label="Allow or deny machine to machine application type"
          ng-change="$ctrl.saveApplicationType('backend_to_backend')"
          ng-disabled="$ctrl.isReadonlySetting('application.types.backend_to_backend.enabled')"
        >
          Backend-to-Backend
          <md-tooltip ng-if="$ctrl.isReadonlySetting('application.types.backend_to_backend.enabled')"
            >{{$ctrl.providedConfigurationMessage}}</md-tooltip
          >
        </md-checkbox>
      </md-input-container>
    </div>
  </div>

  <div class="gv-form">
    <h2>Providers</h2>
    <div class="gv-form-content" layout="column">
      <md-table-container ng-if="$ctrl.clientRegistrationProviders.length > 0">
        <table md-table class="gv-table-dense">
          <thead md-head>
            <tr md-row>
              <th md-column>Name</th>
              <th md-column>Description</th>
              <th md-column>Last updated at</th>
              <th md-column width="48px" nowrap></th>
            </tr>
          </thead>
          <tbody md-body>
            <tr md-row ng-repeat="clientRegistrationProvider in $ctrl.clientRegistrationProviders | orderBy: name">
              <td md-cell>
                <a ng-click="$ctrl.select(clientRegistrationProvider)">{{clientRegistrationProvider.name}}</a>
              </td>
              <td md-cell>{{clientRegistrationProvider.description}}</td>
              <td md-cell>{{clientRegistrationProvider.updated_at | date:'MMM d, y h:mm:ss a'}}</td>
              <td md-cell width="40" nowrap>
                <ng-md-icon
                  permission
                  permission-only="'environment-client_registration_provider-d'"
                  icon="delete"
                  ng-click="$ctrl.delete(clientRegistrationProvider)"
                >
                  <md-tooltip md-direction="top" md-visible="false">Delete</md-tooltip>
                </ng-md-icon>
              </td>
            </tr>
          </tbody>
        </table>
      </md-table-container>

      <gravitee-empty-state
        ng-if="$ctrl.clientRegistrationProviders.length === 0"
        icon="perm_identity"
        model="Client Registration Provider"
        message="Client Registration providers will appear here"
        sub-message="Start creating a client registration provider"
        create-mode="true"
      ></gravitee-empty-state>

      <div style="text-align: center">
        <md-button
          permission
          permission-only="'environment-client_registration_provider-c'"
          ng-if="$ctrl.clientRegistrationProviders.length === 0"
          aria-label="Add client registration provider"
          class="md-fab"
          ng-click="$ctrl.create()"
        >
          <md-tooltip md-direction="top" md-visible="false">New client registration provider</md-tooltip>
          <ng-md-icon icon="add"></ng-md-icon>
        </md-button>
      </div>
    </div>
  </div>
</div>
